<!--
    by: yuanbiao 2021年06月23日
    name: x-image-upload
    notes:
-->
<template>
  <div :class="prefixCls">
    <img v-if="photoSrc"
      :class="`${prefixCls}__case_img`"
      :src="photoSrc"
    >
    <img v-else-if="Object.keys(defaultImgsDict).includes(photoType)"
      :class="`${prefixCls}__case_img`"
      :src="defaultImgsDict[photoType]"
    >
    <div v-else
      :class="`${prefixCls}__default`"
    ></div>
    <label :class="[`${prefixCls}__btn`, 'text-center']" v-if="!readonly">
      <div :class="`${prefixCls}__btn_icon`">
        <i :class="['xvu-iconfont', iconClass]"></i>
      </div>
      <div :class="`${prefixCls}__btn_label`">{{photoLabel}}</div>
      <input class="hide" type="file" accept="image/*" @change="fileChange">
    </label>
  </div>
</template>

<script>
import Toast from '@/components/toast/index.js'
import idcard_front from './idcard_front.png'
import idcard_back from './idcard_back.png'
import idcard_front_1 from './idcard_front_1.png'
import idcard_back_1 from './idcard_back_1.png'
import license from './license.png'
const prefixCls = 'x-image-upload'

export default {
  name: 'x-image-upload',
  props: {
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data() {
    return {
      prefixCls: prefixCls,
      iconClass: 'xvu-plus',
      readonly: false,
      photoType: '', // idcard_front|idcard_back|idcard_front_1|idcard_back_1|license
      photoLabel: '',
      photoFile: null,
      photoSrc: '',
      defaultImgsDict: {
        idcard_front,
        idcard_back,
        idcard_front_1,
        idcard_back_1,
        license
      }
    }
  },
  watch: {
    options: {
      handler (n, o) {
        console.log(n, o)
        this.mergeOptions(n)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    mergeOptions (data) {
      Object.keys(data).forEach(k => {
        if (this[k] === data[k]) return
        switch (k) {
          case 'photoType':
          case 'photoLabel':
          case 'photoSrc':
            this[k] = data[k] || ''
            break
          case 'readonly':
            this[k] = !!data[k]
            break
        }
      })
    },
    init () {
      // 核实是否有摄像头
      this.iconClass = 'xvu-plus'
      if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
        navigator.mediaDevices.enumerateDevices().then((deviceInfos) => {
          this.mediaDevicesList = deviceInfos.filter(v => v.kind === 'videoinput')
          if (this.mediaDevicesList.length) {
            this.iconClass = 'xvu-photo-fill'
          }
        })
      }
    },
    fileChange (e) {
      let reg = /^(?:image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i
      if (!e.target.files) {
        Toast('未找到有效文件！')
        return
      }
      if (!reg.test(e.target.files[0].type)) {
        Toast('必须选择一个图片文件！')
        return
      }
      if (e.target.files.length === 0) {
        this.photoSrc = ''
        this.photoFile = null
        this.$emit('change', this.photoFile, this.photoSrc)
      } else if (e.target.files[0]) {
        let fr=new FileReader()
        fr.onload = (evt) => {
          this.photoSrc = evt.target.result
          this.photoFile = e.target.files[0]
          this.$emit('change', this.photoFile, this.photoSrc)
        }
        fr.readAsDataURL(e.target.files[0])
      }
    }
  }
}
</script>
